
<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true">
          <el-form-item
            label="预收金额:"
            prop="inFactoryMileage"
          >
            <el-input
              size="small"
              v-model="inpuMont"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col align="center">
        <el-button
          size="mini"
          type="success"
          @click="confirm"
        >确认</el-button>
      </el-col>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      width="400px"
      :visible.sync="visible"
      :append-to-body="true"
      @close="dialogClose"
    >
      <QRCode
        :amount="inpuMont"
        :baseUrl="baseUrl"
        :paymentType="2"
        @refreshCode="refreshCode"
        @cancel="cancel"
        @paySuccess="paySuccessEv"
      />
    </el-dialog>
  </div>
</template>
<script>
// 预收款界面
import { QRCode } from "@/components/index";
import { paymentPos } from '@/api/after-sale/payment';
import { getStoreId } from '@/utils';
export default {
  props: {
    fromdata: {
      type: Object,
      default: () => {
        return {};
      }
    },
    workOrderNo: {
      type: Number | String,
    },
  },
  components: {
    QRCode,
  },
  data () {
    return {
      inpuMont: 0,
      visible: false,
      dialogTitle: '工单预收款',
      baseUrl: '',
    }
  },
  methods: {
    paySuccessEv () {
      this.$confirm('是否支付完成?', '确认信息', {
        distinguishCancelAndClose: true,
        type: 'info',
        confirmButtonText: '已支付',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$emit('dialogCloseEv')
        })
        .catch(action => {

        });
    },
    cancel () {
      this.$confirm('是否确认取消支付？', '确认信息', {
        distinguishCancelAndClose: true,
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$emit('dialogCloseEv')
        })
        .catch(action => {

        });
    },
    refreshCode () {
      this.visible = false;
    },
    async getQrImage () {
      let requestInfo = {
        imprest: this.inpuMont,//	number预付款
        // name: '',//	string姓名
        paymentType: 8,//	integer($int32)付款类型
        storeId: getStoreId(),//	integer($int32)门店
        workOrderNo: this.workOrderNo,//	string工单号
      };
      const { data, success } = await paymentPos(requestInfo);
      if (success) {
        this.baseUrl = data;
      }
    },
    async confirm () {
      if (this.inpuMont <= 0) {
        this.$message.warning('请输入金额');
        return;
      }
      if (this.inpuMont > this.fromdata.shouldAmount) {
        this.$message.warning('输入金额大于工单应收金额，请确认');
        return;
      }
      this.visible = true;
      this.dialogTitle = "收款二维码";
      this.width = "400px";
      this.getQrImage();
    },
    dialogClose () {
      this.visible = false;
    }
  }

}
</script>